<template>
  <div>
    <div class="top">
      <b-navbar toggleable="lg" :align="'center'" type="light" variant="faded">
        <b-navbar-brand href="#"><NuxtLogo></NuxtLogo></b-navbar-brand>
        <b-navbar-toggle
          style="float: right"
          target="nav-collapse"
        ></b-navbar-toggle>
        <b-collapse id="nav-collapse" is-nav>
          <!-- Right aligned nav items -->
          <b-navbar-nav class="black-text ml-auto">
            <b-nav-item href="/" right>首页</b-nav-item>

            <!-- Navbar dropdowns -->
            <b-nav-item-dropdown class="black-text" text="品牌故事">
              <!-- <b-dropdown-item href="/about">丰烁简介</b-dropdown-item>
              <b-dropdown-item href="/about?id=1">成长历程</b-dropdown-item>
              <b-dropdown-item href="/about?id=2">企业团队</b-dropdown-item>
              <b-dropdown-item href="/about?id=3">企业文化</b-dropdown-item> -->
              <b-dropdown-item href="/custom/1?id=1&page=1&pagsize=10"
                >丰烁简介</b-dropdown-item
              >
              <b-dropdown-item href="/custom/1?id=2&page=1&pagsize=10"
                >成长历程</b-dropdown-item
              >
              <b-dropdown-item href="/custom/1?id=3&page=1&pagsize=10"
                >企业团队</b-dropdown-item
              >
              <b-dropdown-item href="/custom/1?id=4&page=1&pagsize=10"
                >企业文化</b-dropdown-item
              >
            </b-nav-item-dropdown>

            <b-nav-item-dropdown class="black-text" text="新闻资讯">
              <!-- 2?id=1&page=1&pagsize=10 -->
              <b-dropdown-item href="/custom/2?id=1&page=1&pagsize=10"
                >丰烁资讯</b-dropdown-item
              >
              <b-dropdown-item href="/custom/2?id=2&page=1&pagsize=10"
                >媒体聚焦</b-dropdown-item
              >
            </b-nav-item-dropdown>
            <b-nav-item-dropdown class="black-text" text="我们的服务">
              <b-dropdown-item href="/custom/3?id=1&page=1&pagsize=10"
                >食堂承包</b-dropdown-item
              >
              <b-dropdown-item href="/custom/3?id=2&page=1&pagsize=10"
                >食堂配送</b-dropdown-item
              >
              <b-dropdown-item href="/custom/3?id=3&page=1&pagsize=10"
                >食堂装修</b-dropdown-item
              >
              <b-dropdown-item href="/custom/3?id=4&page=1&pagsize=10"
                >食堂升级</b-dropdown-item
              >
              <b-dropdown-item href="/custom/3?id=5&page=1&pagsize=10"
                >餐饮咨询</b-dropdown-item
              >
              <b-dropdown-item href="/custom/3?id=6&page=1&pagsize=10"
                >丰烁品牌</b-dropdown-item
              >
              <b-dropdown-item href="/custom/3?id=7&page=1&pagsize=10"
                >舌尖上的丰烁</b-dropdown-item
              >
            </b-nav-item-dropdown>
            <b-nav-item-dropdown class="black-text" text="选择丰烁">
              <b-dropdown-item href="/custom/18?id=1&page=1&pagsize=10"
                >安全意识</b-dropdown-item
              >
              <b-dropdown-item href="/custom/18?id=2&page=1&pagsize=10"
                >食物质量</b-dropdown-item
              >
              <b-dropdown-item href="/custom/18?id=3&page=1&pagsize=10"
                >食堂环境</b-dropdown-item
              >
              <b-dropdown-item href="/custom/18?id=4&page=1&pagsize=10"
                >服务质量</b-dropdown-item
              >
            </b-nav-item-dropdown>

            <b-nav-item href="/custom/25?id=0&page=1&pagsize=10"
              >企业招聘</b-nav-item
            >
            <b-nav-item href="/custom/23?id=0&page=1&pagsize=10"
              >合作伙伴</b-nav-item
            >
            <b-nav-item href="/custom/24?id=0&page=1&pagsize=10"
              >联系我们</b-nav-item
            >
            <b-nav-item href="#">在线留言</b-nav-item>
            <b-nav-item href="#">区域承包</b-nav-item>
          </b-navbar-nav>
        </b-collapse>
      </b-navbar>
    </div>
  </div>
</template>

<script>
export default {}
</script>

<style scoped>
.top {
  width: 80%;
  margin: 0 auto;
}
.black-text {
  color: black !important;
}

::v-deep .b-nav-dropdown:hover .dropdown-menu {
  display: block !important;
}
::v-deep .nav-item {
  height: 100%;
}
::v-deep .dropdown-menu:hover {
  display: block !important;
}
::v-deep .dropdown-menu {
  top: 30px;
}
</style>
